// Compass imports.
@import "compass/reset";
@import "compass/css3";
@import "compass/css3/user-interface";
@import url(http://fonts.googleapis.com/css?family=Quicksand);

// This is a reset for all custom tags that will be created.
[directory], [action], [alignment], [aligner], [wrapper], [icon], [name] {
	border: 0;
	cursor: default;
	display: block;
	font: inherit;
	margin: 0;
	padding: 0;
	position: static;
	vertical-align: baseline;
	zoom: 1;
}

// Define the background style.
html {
	@include user-select(none);
	background: url(/resources/images/background.jpg) repeat;
	color: white;
	font-family: Quicksand, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	height: 100%;
	overflow: hidden;
}

body {
	@include user-select(none);
	height: 100%;
	overflow: hidden;
	> [ng-view] {
		height: 100%;
		overflow: auto;
	}
}

// Define the logo style.
#logo {
	bottom: 0;
	position: fixed;
	right: 15px;
	z-index: -1;
	zoom: 1;
}

// Define the alignment component.
[alignment] {
	display: table;
	height: 100%;
	width: 100%;
}

[aligner] {
	display: table-cell;
}

// Define the directory component.
$directoryColor: #999;
$directoryHoverColor: #FFF;
$zoomSpeed: .3s;

[directory] {
	@include inline-block(false);
	@include transition(font-size $zoomSpeed false false, margin $zoomSpeed false false);
	behavior: url(/PIE.htc);
	color: $directoryColor;
	font-size: 110%;
	margin: 15px;
	vertical-align: middle;
	&.hover, &.selected {
		.directory-icon {
			border-color: $directoryHoverColor;
		}
		.directory-name {
			color: $directoryHoverColor;
		}
	}
	&.selected {
		font-size: 140%;
	}
	[icon] {
		@include border-radius(100%);
		@include transition(border-color $zoomSpeed false false);
		border: .2em solid $directoryColor;
		height: 5em;
		margin: 7px auto;
		width: 5em;
	}
	[name] {
		@include transition(color $zoomSpeed false false);
		font-weight: bold;
	}

}

// Define the icon component.
[icon] {
	behavior: url(/PIE.htc);
}

// Define the name component.
[name] {
	text-align: center;
	text-transform: capitalize;
}

// Define the wrapper component.
[wrapper] {
	@include inline-block(false);
	white-space: nowrap;
}